import React, { lazy, Suspense } from 'react'
import './App.scss'
import { Route, Switch, Redirect } from 'react-router-dom'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import Test from './pages/Test'
import Test2 from './pages/Test2'
import Edit from './pages/Profile/Edit'
import AuthRoute from './components/AuthRoute'
// import Chat from './pages/Profile/Chat'
import Article from './pages/Article'
import Search from './pages/Search'
import Result from './pages/Search/Result'

// react路由懒加载, 需要额外使用lazy函数包裹
// 懒加载过程中 是会有白屏, 需要通过一个Suspense 组件提供一个过渡结构
const Chat = lazy(() => import('./pages/Profile/Chat'))

// {
//   path: '/xxx',
//   component: () => import('....')
// }

export default function App() {
  return (
    <div className="app">
      <Suspense
        fallback={<div style={{ color: 'red' }}>页面正在加载中...</div>}
      >
        <Switch>
          {/* 方式一： */}
          {/* <Route path="/" exact>
          <Redirect to="/home"></Redirect>
        </Route> */}

          {/* 方式二：优势在于将来如果需要一定的逻辑判断 */}
          <Route
            path="/"
            exact
            render={() => {
              // if(!token) return <Redirect to="/login"></Redirect>
              return <Redirect to="/home"></Redirect>
            }}
          ></Route>

          {/* 方式三：建议不用！！ */}
          {/* <Redirect path="/" exact to="/home"></Redirect> */}

          <Route path="/home" component={Layout} />
          <Route path="/login" component={Login}></Route>

          {/* 登录访问控制 */}
          {/* <Route path="/profile/edit" component={Edit}></Route> */}
          {/* <Route
          path="/profile/edit"
          render={() => {
            if (!hasToken()) {
              return <Redirect to="/login" />
            }
            return <Edit />
          }}
        ></Route> */}
          <AuthRoute path="/profile/edit" component={Edit}></AuthRoute>
          <AuthRoute path="/chat" component={Chat}></AuthRoute>

          <Route path="/article/:id" component={Article}></Route>

          <Route path="/search" component={Search} exact></Route>
          <Route path="/search/result" component={Result}></Route>

          <Route path="/test" component={Test}></Route>
          <Route path="/test2" component={Test2}></Route>
        </Switch>
      </Suspense>
    </div>
  )
}
